<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>FreeMarker Web</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 960px;
            background: #fff;
            max-width: 1024px;
            margin: 0 auto;
        }

        #main2 {
            margin-top: -120px;
        }

        .one,
        .two {
            position: relative;
        }

        .one .title {
            position: absolute;
            top: 120px;
            font-size: 16px;
            font-weight: 400;
            color: #585858;
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }

        .two .title {
            position: absolute;
            top: 120px;
            left: 10px;
            font-size: 16px;
            font-weight: 700;
            color: #585858;
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }

        .one .sub {
            position: absolute;
            bottom: 76px;
            font-style: italic;
            font-size: 12px;
            z-index: 2;
            letter-spacing: 1px;
        }

        .one .sub1 {
            left: 300px;
        }

        .one .sub2 {
            left: 500px;
        }
    </style>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="/static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/static/js/echarts.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
    <script type="text/javascript"
            src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
    <script type="application/javascript" src="/static/js/doT.js"></script>
</head>
<body>

<#--hello ${user}-->

<#--集合 ListDemo (可以通过下标取值）-->
<#--<#list myList as item>-->
<#--${item!}<br/>-->
<#--</#list>-->

<#--集合 map（直接取某个key的值）-->
<#--<#list map?keys as key>-->
<#--${key} : ${map[key]}<br/>-->
<#--</#list>-->

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="container" style="height: 50%"></div>


<script type="text/javascript">

    $(function () {
        echart1();
    });

    function echart1() {
        $.ajax({
            url: '/echart',
            method: 'get',
            dataType: 'json',
            success: function (re) {
                f(re.legend,re.series,re.xAxis);
            }
        })
    };

    function f(legend,series,xAxis) {
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        var posList = [
            'left', 'right', 'top', 'bottom',
            'inside',
            'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
            'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
        ];

        app.configParameters = {
            rotate: {
                min: -90,
                max: 90
            },
            align: {
                options: {
                    left: 'left',
                    center: 'center',
                    right: 'right'
                }
            },
            verticalAlign: {
                options: {
                    top: 'top',
                    middle: 'middle',
                    bottom: 'bottom'
                }
            },
            position: {
                options: echarts.util.reduce(posList, function (map, pos) {
                    map[pos] = pos;
                    return map;
                }, {})
            },
            distance: {
                min: 0,
                max: 100
            }
        };

        app.config = {
            rotate: 90,
            align: 'left',
            verticalAlign: 'middle',
            position: 'insideBottom',
            distance: 15,
            onChange: function () {
                var labelOption = {
                    normal: {
                        rotate: app.config.rotate,
                        align: app.config.align,
                        verticalAlign: app.config.verticalAlign,
                        position: app.config.position,
                        distance: app.config.distance
                    }
                };
                myChart.setOption({
                    series: [{
                        label: labelOption
                    }, {
                        label: labelOption
                    }, {
                        label: labelOption
                    }, {
                        label: labelOption
                    }]
                });
            }
        };


        var labelOption = {
            normal: {
                show: true,
                position: app.config.position,
                distance: app.config.distance,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                rotate: app.config.rotate,
                formatter: '{c}  {name|{a}}',
                fontSize: 16,
                rich: {
                    name: {
                        textBorderColor: '#fff'
                    }
                }
            }
        };

        option = {
            color: ['#003366', '#006699', '#4cabce', '#e5323e'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: legend
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    axisTick: {show: false},
                    data: xAxis
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: series
        };

        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }

</script>
</body>
</body>
</html>